﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ElementOverlayTest.aspx.cs" Inherits="SCS.Web.UI.WebControls.Test.ElementOverlayTest" %>

<%@ Register assembly="SCS.ElementOverlayExtender" namespace="SCS.Web.UI.WebControls" tagprefix="SCS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    #overlay
    {     
        color: #fff;
        background-color: transparent;
        display: none;
    }
    .overlay-bg
    {        
        background-color: #666;        
        filter: alpha(opacity=50);
	    opacity: 0.5;	
	    display: none;
    }
    #top
    {
        padding-top: 50px;
        height: 50px;
        background-color: Yellow;
    }
    #main
    {        
        height: 300px;
        width: 400px;
        margin-left: auto;
        margin-right: auto;
        background-color: Green;
    }
    #bottom
    {
        height: 100px;
        background-color: Blue;
    }
    #pic-desc
    {
        font-size: 2em;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        
        <div id="wholePage" runat="server">
            <div id="overlay" runat="server"></div>
    
            <SCS:ElementOverlayExtender ID="ElementOverlayExtender1" runat="server" 
                TargetControlID="overlay"                 
                PopulateTriggerControlID="showLink" 
                ServiceMethod="GetHtml" 
                TriggerShowingText="Close Overlay" 
                TriggerHidingText="Show Overlay" 
                BackgroundCssClass="overlay-bg" 
                CoverElementId="main" />
        
            <div id="top"><a href="javascript:{}" id="showLink" runat="server">Show Overlay</a></div>
            <div id="main" runat="server">
                <img src="Hydrangeas.jpg" style="width:100%; height:100%;" />
            </div>
            <div id="bottom"></div>
        </div>
    </form>
</body>
</html>
